<style scoped>
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .rj-cell {
        font-size: 0;
    }
    label.rj-cell-hd {
        width: 24%;
        display: inline-block;
        font-size: 14px;
        padding: 5px 2%;
    }
    .rj-cell-bd {
        display: inline-block;
        font-size: 14px;
        padding: 5px 2%;
    }
    .rj-cell-item {
        display: inline-block;
        font-size: 14px;
        padding: 5px 0;
        padding-right: 15px;
        color: #ccc;
    }
    .rj-input {
        border: 0;
        width: 60px;
        padding: 6px 10px;
    }
    [readonly] {
        color:#ccc;
    }
    .layui-textarea.rj {
        min-height: auto;
        height: 34px;
        border: 0;
        width: 100px;
        margin: 0 auto;
    }
</style>

<template>
    <div class="company">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>{{actParam.title}}</legend>
        </fieldset>

        <form class="layui-form " id="formid">
            <input type="hidden" name="type" value="3" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">结算单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="" :value="baseInfo.code" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">物流公司</label>
                <div class="layui-input-block">
                    <input type="text" name="" :value="baseInfo.customername" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">结算金额(元)</label>
                <div class="layui-input-block">
                    <input type="text" name="" :value="baseInfo.amount" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="" :value="baseInfo.remark" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">审批意见</label>
                <div class="layui-input-block">
                    <textarea name="opinion" v-model="opinion" placeholder="请输入审批意见" class="layui-textarea"></textarea>
                </div>
            </div>
<!--            <div style="padding: 20px; background-color: #F2F2F2;">-->
<!--                <div class="layui-row layui-col-space15">-->
<!--                    <div class="layui-col-md6" v-for="(item, index) in baseInfo.wlinfos" :key="item.guid">-->
<!--                        <input type="hidden" :name="'items[' + index + '].guid'" :value="baseInfo.items[index].guid" />-->
<!--                        <input type="hidden" :name="'items[' + index + '].wlinfoid'" :value="item.guid" />-->
<!--                        <div class="layui-card">-->
<!--                            <div class="layui-card-header">物流订单 {{index + 1}}</div>-->
<!--                            <div class="layui-card-body">-->
<!--                                <div class="rj-cell">-->
<!--                                    <label class="rj-cell-hd">物流订单编号:</label>-->
<!--                                    <div class="rj-cell-bd">-->
<!--                                        <input class="rj-input" type="text" name="" readonly="true" :value="item.code">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="rj-cell" v-if="item.transtype == 1">-->
<!--                                    <label class="rj-cell-hd">车辆信息:</label>-->
<!--                                    <div class="rj-cell-bd">-->
<!--                                            <div class="rj-cell-item">{{item.carcode}}</div>-->
<!--                                            <div class="rj-cell-item">{{item.drivername}}</div>-->
<!--                                            <div class="rj-cell-item">{{item.driverphone}}</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="rj-cell" v-if="item.transtype == 2">-->
<!--                                    <label class="rj-cell-hd">柜号:</label>-->
<!--                                    <div class="rj-cell-bd">-->
<!--                                            <div class="rj-cell-item">{{item.containerno}}</div>-->
<!--                                            <div class="rj-cell-item" v-if="item.deliport != 0">{{item.deliport}}(发货港口)</div>-->
<!--                                            <div class="rj-cell-item" v-if="item.arriport != 0">{{item.arriport}}(到货港口)</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="rj-cell">-->
<!--                                    <label class="rj-cell-hd">单价:</label>-->
<!--                                    <div class="rj-cell-bd">-->
<!--                                        <div class="rj-cell-item">{{item.fareprice}}</div>-->
<!--                                        <div class="rj-cell-item">{{item.farepricetypename}}</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="rj-cell">-->
<!--                                    <label class="rj-cell-hd">结算金额(元):</label>-->
<!--                                    <div class="rj-cell-bd">-->
<!--                                        <input class="rj-input" type="text" name="" readonly="true" :value="item.amount">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="rj-cell" v-show="item.othercost != ''">-->
<!--                                    <label class="rj-cell-hd">其他费用(元):</label>-->
<!--                                    <div class="rj-cell-bd">-->
<!--                                        <div class="rj-cell-item">{{item.othercost}}</div>-->
<!--                                        <div class="rj-cell-item">{{item.otherremark}}</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="rj-cell">-->
<!--                                    <label class="rj-cell-hd">扣减金额:</label>-->
<!--                                    <div class="rj-cell-bd">-->
<!--                                        <input class="rj-input" type="number" :name="'items[' + index + '].deducAmount'"  placeholder="请输入扣减金额" >-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="rj-cell">-->
<!--                                    <label class="rj-cell-hd">扣减备注:</label>-->
<!--                                    <div class="rj-cell-bd">-->
<!--                                        <input class="rj-input" type="number" :name="'items[' + index + '].remark'"  placeholder="请输入扣减备注">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a class="layui-btn subbtn" @click="postForm">同意</a>
                    <a class="layui-btn layui-btn-primary" @click="$parent.back">返回</a>
                </div>
            </div>
                <table     class="layui-table layui-form">
                    <thead>
                    <tr>
                        <th>物流订单编号</th>
                        <th>车牌号</th>
                        <th>司机</th>
                        <th>柜号</th>
                        <th>发货港口</th>
                        <th>到货港口</th>
                        <th>单价</th>
                        <th>计价方式</th>
                        <th>结算金额</th>
                        <th>其他费用</th>
                        <th>其他费用描述</th>
                        <th>扣减金额</th>
                        <th>扣减备注</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="id9" v-for="(item, index) in baseInfo.wlinfos" :key="item.guid">
                        <input type="hidden" :name="'items[' + index + '].guid'" :value="baseInfo.items[index].guid" />
                        <input type="hidden" :name="'items[' + index + '].wlinfoid'" :value="item.guid" />
                        <td>{{item.code}}</td>
                        <td>{{item.carcode}}</td>
                        <td>{{item.drivername}} {{item.driverphone}}</td>
                        <td>{{item.containerno}}</td>
                        <td>{{item.deliport}}</td>
                        <td>{{item.arriport}}</td>
                        <td>{{item.fareprice}}</td>
                        <td>{{item.farepricetypename}}</td>
                        <td>{{item.amount}}</td>
                        <td>{{item.othercost}}</td>
                        <td>{{item.otherremark}}</td>
                        <td><input class="rj-input" type="number" :name="'items[' + index + '].deducAmount'"  placeholder="请输入" ></td>
                        <td><textarea :name="'items[' + index + '].remark'" placeholder="请输入" class="layui-textarea rj"></textarea></td>
                    </tr>
                    </tbody>
                </table>
            <div class="layui-form-item"></div>
        </form>
    </div>
</template>

<script>
    let qs = require('qs');
    export default {

        name: 'PassportExamine',
        data () {
            return {
                baseInfo: {},
                actParam: {},
                opinion: ''
            }
        },
        mounted() {
            this.actParam = this.$store.state.actParam;
            this.getBaseInfo(this.actParam.guid);

            let that = this;
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;

                //提交编辑过的数据
                form.on('submit(submit)', function (data) {
                    let loader = layer.load();
                    $.ajax({
                        url: '/sales/Customer!save.action',
                        data: data.field,
                        type: "post",
                        dataType: "json",
                        success: function(res) {
                            if (res.msg == "success") {
                                that.toast("添加成功");
                                that.$parent.switchPage('WlcompanyList');
                            }  else{
                                that.toast("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                    return false;
                });
            });

        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();
        },
        methods: {
            getBaseInfo: function(id) {
                this.axios({
                    method: 'post',
                    url: '/wlinfo/Wlsettlement!getUpImagInfo.action',
                    params: {wlsettleid: id, url: location.href.split("#")[0]}
                }).then(response => {
                    if (response.data.msg == 'success') {
                        this.baseInfo = response.data.wlsettlement;
                    } else {
                        this.toastError('系统错误');
                    }
                });
            },
            postForm: function () {
                if (this.opinion == '') {
                    this.toastText('审批意见不能为空！')
                    return false;
                }
                //防止重复提交
                $('.subbtn').attr("disabled",true).css("pointer-events","none");

                let postData= this.serialize2Obj($("#formid").serializeArray());
                postData.wlsettleid = this.actParam.guid;
                postData.nodeid = this.actParam.nodeid;
                this.axios({
                    method: 'post',
                    url: '/wlinfo/Wlsettlement!freightApproval.action',
                    params: postData
                }).then((response) => {
                    //恢复提交按钮可点击
                    $('.subbtn').attr('disabled', false).css("pointer-events","auto");

                    if (response.data.msg == 'success') {
                        this.toastSuccess('操作成功');
                        this.$parent.switchPage('WlPayExpensesList');
                    } else if (response.data.msg == 'canotopt') {
                        this.toastError('不允许的操作！');
                    } else {
                        this.toastError("系统错误");
                    }

                }).catch(function (error) {
                    //恢复提交按钮可点击
                    $('.subbtn').attr('disabled', false).css("pointer-events","auto");
                    this.toastError('系统错误');
                });
            }

        }
    }
</script>
